import { useState } from 'react';
import { Transition } from 'components/TransitionGroup'

const styles = {
  init: {
    width: '200px',
    height: '200px',
    backgroundColor: 'rebeccapurple',
    // animation: 'fade-in 1s',
  },
  enter: {
    opacity: 0,
    transform: 'translateX(100%)',
  },
  entering: {
    opacity: 1,
    // transform: 'translateX(0)',
    transition: 'all 1s'
  },
  entered: {
    opacity: 1,
    transform: 'translateX(0)',
  },
  exit: {
    opacity: 1,
  },
  exiting: {
    opacity: 0,
    transform: 'translateX(100%)',
  },
  exited: {
    opacity: 0,
    transform: 'translateX(100%)',
  },
};

export default function Counter() {
  const [count, setCount] = useState(0)
  const [other, setOther] = useState(0)

  function handle() {
    setTimeout(() => {
      setCount(count + 1)
      setOther(other + 1)
      console.log(other)
    }, 500)
  }

  const [visible, setVisible] = useState(true);

  // function handle() {
  //   setCount(count + 1)
  //   setCount(count + 2)
  // }

  return (
    <div>
      <div>{count}</div>
      <div>{other}</div>
      <button onClick={handle}>递增</button>

      <div>
        <button onClick={() => setVisible(!visible)}>
          { visible ? 'hide' : 'show' }
        </button>

        <Transition in={visible} timeout={1000}>
          {(status) => {
            const _style = { ...styles.init, ...styles[status] }
            console.log('status:', status)
            return <div style={_style}>{status}</div>
          }}
        </Transition>
      </div>
    </div>
  )
}
